<template>
  <div class="com">
    <!-- user 数据渲染 -->
    <div class="user">
      <img :src="$axios.defaults.baseURL + commdata.account.defaultAvatar" alt />
      <span class="name">{{commdata.account.nickname}}</span>
      <span class="date">{{newDate}}</span>
      <!-- <span class="number">{{newnumber}}</span> -->
    </div>
    <!-- 内容渲染 -->
    <div class="comdis">
      <par
        v-if="commdata.parent"
        :pars="commdata.parent"
        @getprId="getprId(arguments)"
        :number="newnumber"
        :show="show"
      />
      <div v-if="commdata.parent">
        <div v-if="commdata.parent.parent">
          <div @click="shows" v-if="!show" class="icon">
            <div class="el-icon-arrow-down"></div>
          </div>
          <div @click="showss" v-else class="icon">
            <div class="el-icon-arrow-up"></div>
          </div>
        </div>
      </div>
      <div @mouseenter="isshow = true" @mouseleave="isshow = false">
        <span class="ct">{{commdata.content}}</span>
        <div>
          <div v-for="(item,index) in commdata.pics" :key="index" class="imgbox">
            <img :src="$axios.defaults.baseURL + item.url" alt />
          </div>
        </div>
        <div class="huifu">
          <span v-if="isshow" @click="getPLId(commdata.id)">回复</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import par from "~/components/post/par";
var moment = require("moment");
export default {
  components: {
    par,
  },
  data() {
    return {
      newDate: "",
      isshow: false,
      show: false
    };
  },
  props: ["commdata"],
  created() {
    this.newDate = moment(this.commdata.created_at).format("YYYY-MM-DD  h:mm");
  },
  computed: {

    newnumber() {
      console.log(this.commdata.parent);
      let number = 0;
      let par = this.commdata;
      do {
        number += 1;
        par = par.parent;
      } while (par);

      return number;
    },
  },
  methods: {
    shows() {
      this.show = true
      console.log(123);
    },
    showss() {
      this.show = false
      console.log(123);
    },
    // 最外层的id
    getPLId(id) {
      this.$emit("getPLId", id, this.commdata.account.nickname);
    },
    // 里面的par的id
    getprId(item) {
      // console.log("内层的", item);
      this.$emit("getPLId", item[0], item[1]);
    },
  },
};
</script>

<style lang="less" scoped>
.com {
  padding: 20px 20px 5px;
  border-bottom: 1px dashed #ccc;
  &:last-child {
    border-bottom: 0;
  }
  .user {
    margin-bottom: 10px;
    span {
      font-size: 12px;
      color: #666;
      &.number {
        float: right;
        color: red;
      }
    }
    img {
      width: 20px;
      height: 20px;
      object-fit: cover;
      border-radius: 50%;
      vertical-align: middle;
    }
  }
  .comdis {
    padding-left: 30px;
    .imgbox {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border: 1px dashed #ccc;
      padding: 5px;
      display: inline-block;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .ct {
      display: inline-block;
      font-size: 16px;
      margin: 10px 0;

      width: 100%;
      white-space: noweap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .huifu {
      height: 20px;
      overflow: hidden;
      span {
        margin-right: 10px;
        font-size: 12px;
        color: #1e50a2;
        float: right;
        cursor: pointer;
      }
    }
  }
}
.icon {
  text-align: center;
  font-size: 25px;
}
</style>